import { Grid, Swiper, Toast } from 'antd-mobile';
import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import './home.scss'

import nav1 from '../../assets/homeImages/nav-1.png'
import nav2 from '../../assets/homeImages/nav-2.png'
import nav3 from '../../assets/homeImages/nav-3.png'
import nav4 from '../../assets/homeImages/nav-4.png'
import { DownFill, EnvironmentOutline, SearchOutline } from "antd-mobile-icons";


const colors = ['#ace0ff', '#bcffbd', '#e4fabd', '#ffcfac']

// 首页轮播图图片
let imgArr = [
  { img: 'https://pic35.photophoto.cn/20150511/0034034892281415_b.jpg'},
  { img: 'https://pic2.zhimg.com/v2-5fb13110e1de13d4c11e6e7f5b8026da_r.jpg'},
  { img: 'https://pic2.zhimg.com/v2-8994c493b5a8c5536a5931d3c4eb8301_r.jpg?source=1940ef5c'},
]

let navList = [
  {
    id: 1,
    img: nav1,
    title: '整租',
    path: '/home/list'
  },
  {
    id: 2,
    img: nav2,
    title: '合租',
    path: '/home/list'
  },
  {
    id: 3,
    img: nav3,
    title: '地图找房',
    path: '/home/list'
  },
  {
    id: 4,
    img: nav4,
    title: '去出租',
    path: '/map'
  },
]



const Home =  () => {

  // 获取轮播图数据
  let [swiperList, setSwiperList] = useState(colors)

  useEffect(() => {
    const getSwipers =  async () => {
      let res = await axios.get('http://localhost:8080/home/swiper').then(res => {
        return res.data.body
      })
      console.log('swiperList', res)
      setSwiperList(res)
    }
    getSwipers().then(r => {})
  }, []);

  // 跳转
  let navigate = useNavigate()
  const toPath = (path) => {
    console.log('path', path)
    //window.location.href = path
    navigate(path)
  }

  // 租房小组数据
  let [groupList, setGroupList] = useState([])
  useEffect(() => {
    const getGroupList =  async () => {
      let res = await axios.get('http://localhost:8080/home/groups', {
        params: {
          area: 'AREA%7C88cff55c-aaa4-e2e0'  // 将当前所在区域作为参数发送到服务器
        }
      }).then(res => {
        return res.data.body
      })
      console.log('groupList', res)
      setGroupList(res)
    }
    getGroupList().then(r => {})
  }, []);

  // 新闻资讯
  let [newsList, setNewsList] = useState([])
  useEffect(() => {
    const getNewsList =  async () => {
      let res = await axios.get('http://localhost:8080/home/news').then(res => {
        return res.data.body
      })
      console.log('newsList', res)
      setNewsList(res)
    }
    getNewsList()
  }, []);

  // 获取地理位置信息
  useEffect(() => {
    getPosition()
  }, []);
  const getPosition = () => {
    navigator.geolocation.getCurrentPosition(position => {
      let { latitude, longitude } = position.coords
      console.log('当前位置信息', position)
    })
  }

  return (
    <div>
      {/*  轮播图  */}
      <div className={'swiper'}>
        <Swiper
          loop
          autoplay
        >
          { imgArr && imgArr.map((item, index)=> (
            <Swiper.Item key={index}>
              <div
                style={{ backgroundImage: `url(${imgArr[index].img})`}}
                className={'img-container'}
                onClick={() => {
                  Toast.show(`你点击了卡片 ${index + 1}`)
                }}
              >
              </div>
            </Swiper.Item>
          ))}
        </Swiper>
        {/*  顶部搜索栏  */}
        <div className={'search-box'}>

          <div className={'search'}>
            {/* 位置 */}
            <div className={'location'} onClick={() => toPath('/cityList')}>
              <span className={'name'}>北京&nbsp;</span>
              <DownFill />
            </div>

            {/* 搜索框 */}
            <div className={'form'} onClick={() => toPath('/search')}>
              <SearchOutline className={'icon-search'} />
              <span className={'text'}>请输入小区或地址</span>
            </div>
          </div>
          {/* 右侧地图图标 */}
          <div className={'icon-map'} onClick={() => toPath('/map')}>
            <EnvironmentOutline />
          </div>

        </div>
      </div>

      {/*  导航小图标  */}
      <div className={'icon-container'}>
        <Grid columns={4} gap={1}>
          { navList.map(item => (
            <Grid.Item key={item.id}>
              <div className={'icon-center'} onClick={() => {toPath(item.path)}}>
                <img src={item.img} alt="" style={{width: '50px', height: '50px'}}/>
              </div>
              <div style={{textAlign: 'center'}}>{item.title}</div>
            </Grid.Item>
          ))}
        </Grid>
      </div>
      {/*  租房小组  */}
      <div>
        <div className={'group'}>
          <div className={'group-title'}>
            <div className={'group-title-left'}>租房小组</div>
            <div className={'group-title-right'}>更多 ></div>
          </div>
          <div className={'group-content'}>
            <Grid columns={2} gap={5}>
              { groupList && groupList.map(item => {
                return (
                  <Grid.Item key={item.id}>
                    <div className={'group-content-item'}>
                      <div style={{ marginRight: '20px', marginTop: '10px'}}>
                        <div style={{ fontWeight: '600'}}>{ item.title }</div>
                        <div>{ item.desc }</div>
                      </div>
                      <div>
                        <img src={`http://localhost:8080${item.imgSrc}`} alt="" style={{ width: '50px', height: '50px'}} />
                      </div>
                    </div>
                  </Grid.Item>
                )
              })}
            </Grid>
          </div>
        </div>
      </div>
      {/*  最新资讯  */}
      <div className={'news'}>
        <div className={'news-title'}>最新资讯</div>
        <div className={'news-content'}>
          { newsList && newsList.map(item => (
            <div className={'news-content-item'} key={item.id}>
              <div className={'news-content-item-left'}>
                <img src={`http://localhost:8080${item.imgSrc}`} alt="" style={{ width: '120px', height: '80px'}} />
              </div>
              <div className={'news-content-item-right'}>
                <div><span style={{ fontWeight: '600'}}>{item.title}</span></div>
                <div style={{ display: 'flex', justifyContent: 'space-between', color: '#999'}}>
                  <div>{ item.from }</div>
                  <div>{ item.date }</div>
                </div>
              </div>
            </div>
          ))}
        </div>
        <div className={'footer'}>我是有底线的</div>
      </div>
    </div>
  )
}

export default Home;